<script>
    export default {
        name: "ys-basic-setting",
        components:{
            
        },
        props: {
            
        },
        data() {
            return {
              face_url: "../../static/images/icons/noface.png",    //头像url
              nickname: "小小人",
              username: "13786032480"
            }
        },
        computed: {
            changeFace : function() {
                return 'background-image: url('+this.face_url +');';
            }
        },
        methods: {
            chooseImg : function() {
                let self = this;
                uni.chooseImage({
                    count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                        self.face_url = res.tempFilePaths;                 
                    }
                });
            }
        }
    }      
</script>
<template>
    <view class="basic-setting form">
        <view class="face form-row">
            <view class="form-row-title">头像</view>
            <view @click="chooseImg" class="face-img form-row-item" :style="'background-image: url('+face_url +');'"></view>
        </view>
        <view class="nickname form-row">
            <view class="form-row-title">昵称</view>
            <input type="text form-row-item" :value="nickname"/>
        </view>
        <view class="username form-row">
            <view class="form-row-title">账号</view>
            <view class="text form-row-item">{{username}}</view>
        </view>
        <button class="form-save big-btn">保存</button>
    </view>
</template>
<style lang="scss">
    .basic-setting {
        .face {
            height:220upx;
            border-bottom: 20upx solid #e5e5e5;            
            .face-img {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 108upx;
                height: 108upx;               
            }
        }
    }
</style>